<template>
  <div class="sso-login-container">
    <!-- Background with animated gradient -->
    <div class="background-gradient"></div>
    
    <!-- Main login card -->
    <div class="login-card">
      <!-- Header -->
      <div class="card-header">
        <div class="logo-section">
          <div class="logo-icon">🔐</div>
          <h1 class="app-title">SSO Portal</h1>
        </div>
        <p class="subtitle">{{ isLoginMode ? '欢迎回来!' : '创建您的账号' }}</p>
      </div>

      <!-- Form Container -->
      <div class="form-container">
        <!-- Mode Toggle -->
        <ModeToggle 
          :is-login-mode="isLoginMode"
          @switch-to-login="switchToLogin"
          @switch-to-register="switchToRegister"
        />

        <!-- Login Form -->
        <LoginForm 
          v-if="isLoginMode"
          ref="loginFormRef"
          :loading="loading"
          @submit="onLoginSubmit"
        />

        <!-- Register Form -->
        <RegisterForm 
          v-else
          ref="registerFormRef"
          :loading="loading"
          @submit="onRegisterSubmit"
        />

        <!-- Redirect Info -->
        <RedirectInfo :redirect-url="redirectUrl" />
      </div>
    </div>

    <!-- Footer -->
    <div class="footer">
      <p>&copy; 2024 SSO Portal. 为您的所有应用提供安全认证。</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useSSO } from './composables/useSSO'
import ModeToggle from './components/ModeToggle.vue'
import LoginForm from './components/LoginForm.vue'
import RegisterForm from './components/RegisterForm.vue'
import RedirectInfo from './components/RedirectInfo.vue'

// SSO composable
const { 
  loading, 
  redirectUrl, 
  handleLogin, 
  handleRegister, 
  checkExistingLogin 
} = useSSO()

// Component refs
const loginFormRef = ref()
const registerFormRef = ref()

// Form state
const isLoginMode = ref(true)

// Mode switching
const switchToLogin = () => {
  isLoginMode.value = true
}

const switchToRegister = () => {
  isLoginMode.value = false
}

// Form handlers
const onLoginSubmit = async (data: { username: string; password: string }) => {
  const result = await handleLogin(data.username, data.password)
  // Login success is handled in the composable
}

const onRegisterSubmit = async (data: { username: string; password: string; email?: string }) => {
  const result = await handleRegister(data.username, data.password, data.email)
  
  if (result.success) {
    // Switch to login mode and pre-fill username
    loginFormRef.value?.setUsername(result.username)
    registerFormRef.value?.clearForm()
    switchToLogin()
  }
}

// Check if already logged in on mount
onMounted(() => {
  checkExistingLogin()
})
</script>

<style scoped>
/* Container and Background */
.sso-login-container {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.background-gradient {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    #667eea 0%, 
    #764ba2 25%, 
    #f093fb 50%, 
    #f5576c 75%, 
    #4facfe 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  z-index: -1;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Main Card */
.login-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  padding: 40px;
  width: 100%;
  max-width: 480px;
  margin: 20px 0;
  animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header */
.card-header {
  text-align: center;
  margin-bottom: 32px;
}

.logo-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.logo-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.app-title {
  font-size: 2.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  letter-spacing: -0.5px;
}

.subtitle {
  color: #64748b;
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0;
}

/* Form Container */
.form-container {
  width: 100%;
}

/* Footer */
.footer {
  margin-top: 40px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

/* Responsive Design */
@media (max-width: 640px) {
  .sso-login-container {
    padding: 16px;
  }
  
  .login-card {
    padding: 24px;
    margin: 10px 0;
  }
  
  .app-title {
    font-size: 1.8rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .logo-section {
    flex-direction: column;
    gap: 8px;
  }
  
  .app-title {
    font-size: 1.6rem;
  }
  
  .login-card {
    padding: 20px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .login-card {
    background: white;
    border: 2px solid #000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .background-gradient {
    animation: none;
  }
  
  .login-card {
    animation: none;
  }
  
  * {
    transition: none !important;
  }
}
</style>
